<script setup lang="ts">
import { computed } from "vue";
import { CaretForwardOutline } from "@vicons/ionicons5";
import { t } from "@/language";
import { useDispatchSignal } from "@/hooks/useSignal";
import OutLine from "./effect/Sidebar.Effect.Outline.vue";
import FXAA from "./effect/Sidebar.Effect.FXAA.vue";
import UnrealBloom from "./effect/Sidebar.Effect.UnrealBloom.vue";
import Bokeh from "./effect/Sidebar.Effect.Bokeh.vue";
//import Pixelate from './effect/Sidebar.Effect.Pixelate.vue';
import Halftone from "./effect/Sidebar.Effect.Halftone.vue";
import { useProjectConfig } from "@/store/modules/projectConfig";

const projectConfigStore = useProjectConfig();

const effectEnabled = computed(() => projectConfigStore.effect.enabled);

function handleEffectEnabledChange(value: boolean) {
  projectConfigStore.setEffectItem("enabled", value);

  useDispatchSignal("effectEnabledChange", value);
}
</script>

<template>
  <div class="flex items-center justify-between">
    <h4>后期处理</h4>
    <n-switch
      v-model:value="effectEnabled"
      @update:value="handleEffectEnabledChange"
    >
      <template #checked>
        {{ "开启" }}
      </template>
      <template #unchecked>
        {{ "关闭" }}
      </template>
    </n-switch>
  </div>

  <n-divider class="!my-3" />

  <n-collapse
    display-directive="show"
    :default-expanded-names="['Anti-aliasing', 'Outline', 'UnrealBloom']"
  >
    <template #arrow>
      <n-icon>
        <CaretForwardOutline />
      </n-icon>
    </template>

    <!--  抗锯齿  -->
    <n-collapse-item
      :title="t('layout.sider.postProcessing[\'Anti-aliasing\']')"
      name="Anti-aliasing"
    >
      <FXAA :effect-enabled="effectEnabled" />
    </n-collapse-item>

    <!--  Outline:描边线  -->
    <n-collapse-item
      :title="t('layout.sider.postProcessing.Outline')"
      name="Outline"
    >
      <OutLine :effect-enabled="effectEnabled" />
    </n-collapse-item>

    <!--  UnrealBloom:仿UE辉光  -->
    <n-collapse-item
      :title="t('layout.sider.postProcessing.Glow')"
      name="UnrealBloom"
    >
      <UnrealBloom :effect-enabled="effectEnabled" />
    </n-collapse-item>

    <!--  Bokeh:变焦  -->
    <n-collapse-item
      :title="t('layout.sider.postProcessing.Bokeh')"
      name="Bokeh"
    >
      <Bokeh :effect-enabled="effectEnabled" />
    </n-collapse-item>

    <!--  Pixelate:像素风  -->
    <!--    <n-collapse-item :title="t('layout.sider.postProcessing.Pixelate')" name="Pixelate">-->
    <!--      <Pixelate :effect-enabled="effectEnabled" />-->
    <!--    </n-collapse-item>-->

    <!--  Halftone:半色调  -->
    <n-collapse-item
      :title="t('layout.sider.postProcessing.Halftoning')"
      name="Halftoning"
    >
      <Halftone :effect-enabled="effectEnabled" />
    </n-collapse-item>
  </n-collapse>
</template>

<style lang="less">
.pass-config-item {
  display: flex;
  align-items: center;
  padding: 0 1rem 0.5rem 1rem;
  width: 100%;

  & > span {
    width: 30%;
  }

  & > div {
    width: calc(70% - 2rem);
  }
}
</style>
